<template>
  <div class="content">
    <div class="left">
      在线点餐系统
    </div>
    <div class="middle">
        <div @click="toPage(1)">
            <a>首页</a>
        </div>
      <div @click="toPage(2)">
        <a>个人中心</a>
      </div>
        <div @click="toPage(5)">
            <a>购物车</a>
        </div>
<!--        <div>-->
<!--            <a>订单中心</a>-->
<!--        </div>-->
      <div>
<!--        <a>后台管理</a>-->
      </div>
    </div>
    <div class="right">
        <div style="height: 50px; margin-right: 20px">
            <img :src="imgUrl" style="height: 100%">
        </div>
      <div>
<!--       欢迎： {{userInfo.mobile ? userInfo.mobile : ''}}-->
      </div>
      <div @click="layout">
        退出登录
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, toRefs, onMounted} from "vue";
import {apiGetUserInfo, apiUserLayout, getImgUrl} from "../../../api";
import router from "../../../router";
import {message} from "ant-design-vue";

export default defineComponent({
    name: "header",
    setup() {
        const state = reactive({
            userInfo: null,
            imgUrl: ''
        })
        // console.log(888888, state.userInfo)

        // 获取前台人员信息
        const getInfo = () => {
            // const params = {
            //     filename: state.userInfo.headPic
            // }
            apiGetUserInfo({}).then((res) => {
                if (res.data.code == 200) {
                    state.userInfo = res.data.data
                    const user = JSON.stringify(res.data.data)
                    window.localStorage.setItem('user', user)
                }
            })
            // getImgUrl(params).then((res) => {
            //     console.log('图片',res.data)
            //     state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
            // })
        }

        // 跳转不同的页面
        const toPage = (val) => {
            if (val == 1) {
                router.push('/overview')
            }
            if (val == 5) {
                router.push('/shoppingCart')
            }
            if (val == 2) {
                router.push('/userCenter')
            }
        }

        // 退出登录
        const layout = () => {
            // 调用接口
            apiUserLayout({}).then((res) => {
                if (res.data.code == 200) {
                    // 清除缓存
                    window.localStorage.removeItem('user')
                    message.success('退出成功')
                }
            })

        }

        onMounted(() => {
            // 如果登录了，获取人员信息
            if (state.userInfo) {
                getInfo()
            }
        })

        return {
            ...toRefs(state),
            toPage,
            layout
        }
    }
})
</script>

<style lang="less" scoped>
.content{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
    background: #fff !important;
  .left{
    font-size: 22px;
    margin-left: 20px;
    font-weight: bold;
  }

  .middle {
    display: flex;
    justify-content: space-between;
    align-items: center;

    div{
      margin-right: 20px;
    }
  }

  .right {
    display: flex;
    justify-content: space-between;
    align-items: center;

    div{
      margin-right: 20px;
    }
  }

}
</style>
